<template>
  <!-- 下拉刷新 -->
  <q-pull-to-refresh ref="pullFresh" class="content-padding" :handler="refresher">
    <!-- <q-page> -->
    <!-- 工点筛选级别 -->
    <breadcrumbs></breadcrumbs>
    <!-- search box -->
    <q-list class="search-box">
      <date-select @date="okSelect"></date-select>
    </q-list>

    <!-- 数据概要 -->
    <div class="data-box bg-white">
      <div class="box-header">{{ $t('数据概要') }}</div>
      <section class="table">
        <div class="row">
          <div class="col-3 td-head text-right">{{ $t('断面数') }}</div>
          <div class="col-3 text-center">{{ tableCountData.csecscount }}</div>
          <div class="col-3 td-head text-right">{{ $t('测点(线)数') }}</div>
          <div class="col-3 text-center">{{ tableCountData.pointcount }}</div>
        </div>
        <div class="row">
          <div class="col-3 td-head text-right">{{ $t('预警数') }}</div>
          <div class="col-3 text-center">{{ tableCountData.total }}</div>
          <div class="col-3 td-head text-right">{{ $t('未及时测量') }}</div>
          <div class="col-3 text-center">{{ tableCountData.noamount }}</div>
        </div>
        <div class="row">
          <div class="col-3 td-head text-right">{{ $t('数据量') }}</div>
          <div class="col text-center">{{ tableCountData.detailcount }}</div>
        </div>
        <div class="row">
          <div class="col-3 td-head text-right">{{ $t('最近测量') }}</div>
          <div class="col text-center">{{ tableCountData.recenttime }}</div>
        </div>
      </section>
    </div>
    <!-- 预警概要，图表 -->
    <div class="row bg-white" style="margin: 10px 0;">
      <div class="col">
        <pie-chart :chartData="pieChartData1" height="200px"></pie-chart>
      </div>
      <div class="col">
        <pie-chart :chartData="pieChartData2" height="200px"></pie-chart>
      </div>
    </div>
    <!-- 未及时测量排行 -->
    <div class="bg-white" style="padding: 10px 8px;">
      <div class="box-header">{{ $t('未及时测量排行') }}</div>
      <table class="table" border="0">
        <thead>
          <tr>
            <th>{{ $t('对象') }}</th>
            <th>{{ $t('未及时测量点数') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,idx) in timelinessList" :key="idx">
            <td>{{ item.name }}</td>
            <td>
              <template>
                <div class="progress-box">
                  <q-progress
                    :percentage="Math.floor((item.amount / timelinessList[0].amount) * 100)"
                    stripe
                    animate
                    height="9px"
                  />
                  <div class="progress-box-text">{{ item.amount }}</div>
                </div>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- </q-page> -->

  </q-pull-to-refresh>
</template>

<script>
import baseMixins from 'pages/mixins/index.js';
export default {
  mixins: [baseMixins],
  data() {
    return {
      isAllTime: true,
      dateRange: [],
      timelinessList: [],
      pieChartData1: {},
      pieChartData2: {},
      tableCountData: {}
    };
  },
  methods: {
    // 默认
    init() {
      this.$nextTick(() => {
        plus.navigator.closeSplashscreen();// 关闭应用启动界面
        this.$refs.pullFresh.trigger();
      });
    },
    refresher(done) {
      this.okSelect().finally(() => {
        done();
      });
    },
    // 时间事件
    okSelect(time) {
      if(time) {
        this.dateRange = time || [
          this.$formatDate(Date.now() - 7 * 24 * 3600 * 1000, "YYYY-MM-DD"),
          this.$formatDate(Date.now(), "YYYY-MM-DD")
        ];
      } else {
        this.isAllTime = true;
      }
      // this.alertCountStatistics();
      // this.measPointTimeliness();
      return Promise.all([this.alertCountStatistics(), this.measPointTimeliness()]);
    },
    // 预警统计
    alertCountStatistics() {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel
      };
      // 时间
      if(!this.isAllTime){
        pars.start_date = this.dateRange[0];
        pars.end_date = this.dateRange[1];
      }
      return this.$axios.getAlertCountStatistics(pars).then(result => {
        let data = result.data || [];
        // 当前报警统计
        this.pieChartData1 = ((tt) => {
          let red = 0, yellow = 0;
          for(let key in tt){
            switch (Math.ceil(key / 10)){
              case 1:
              yellow += tt[key];
              break;
              case 2:
              break;
              default:
              red += tt[key];
              break;
            }
          }
          return {
            typeData: [this.$t('红色预警'), this.$t('黄色预警')],
            valueData: [
              {
                name: this.$t('报警统计'),
                data: [red, yellow],
                color: ["#C00000", "#FFFF00"]
              }
            ]
          };
        })(data.alertcount);
        // 报警统计
        this.pieChartData2 = {
          typeData: [this.$t('未关闭'), this.$t('已关闭')],
          valueData: [
            {
              name: this.$t('报警统计'),
              data: [data.notclosed, data.closed],
              color: ["#FFC000", "#00B050"]
            }
          ]
        };
        // 表格
        this.tableCountData = data;
      });
    },
    // 未及时测量点
    measPointTimeliness() {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel
      };
      // 时间
      if(!this.isAllTime){
        pars.start_date = this.dateRange[0];
        pars.end_date = this.dateRange[1];
      }
      this.timelinessList = [];
      return this.$axios.getMeasPointTimeliness(pars).then(result => {
        this.timelinessList = ((da) => {
          // 从大到小
          da.sort((prv_item, next_item) => {
            return next_item.amount - prv_item.amount;
          });
          return da;
        })(result.data || []);
      });
    }
  },
};
</script>

<style lang="less" scoped>
.bg-white {
  background-color: #ffffff;
}
.search-box {
  border: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.data-box {
  padding: 10px 8px;
}
.box-header{
  font-weight: 600;
  margin-bottom: 5px;
}
.table{
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  // .row
  .row{
    [class^="col"]{
      padding: 5px 0;
    }
    .td-head{
      font-weight: 400;
      font-size: 0.95rem;
    }
  }
  // end row

  // table
  tr{
    th, td{
      border: 1px solid rgba(0, 0, 0, .1);
      padding: 2px 0;
    }
    
    &:not(:first-child, :last-child) {
      th, td{
        border-bottom: none;
      }
    }

    th{
      font-weight: 400;
    }

    td .progress-box{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 2px;

      .q-progress{
        flex: 1;
      }

      .progress-box-text{
        width: 30px;
        font-size: 0.55rem;
      }
    }
  }
}
</style>
